import { Paragraph } from "@/components";
import { colors } from "@/data/shared/colors";
import { Button, ButtonProps } from "@tarojs/components";
import { PropsWithChildren } from "react";
import style from "./index.module.scss";

interface AbstractButtonProps extends Omit<ButtonProps, "plain"> {}

type CtaButtonProps = AbstractButtonProps & {
  variant?: "cta";
  color:
    | "dark"
    | "white"
    | "transparent"
    | "carousel-semi-transparent"
    | "white-opacity"
    | "white-no-border"
    | "exhibition"
    | "viking"
    | "viking-inactive";
  hex?: string;
  inActive?: boolean;
};

type PlainButtonProps = AbstractButtonProps & {
  variant: "plain";
  color?: never;
  hex?: never;
};

const AbstractButton = ({
  children,
  variant = "cta",
  className,
  ...props
}: PropsWithChildren<PlainButtonProps | CtaButtonProps>) => {
  return (
    <Button
      plain
      className={`
      ${style["button"]}
      ${variant === "cta" ? `${style["cta"]}` : ""}
      ${props.color === "white" ? `${style["cta--white"]}` : ""}
      ${
        props.color === "white-no-border"
          ? `${style["cta--white-no-border"]}`
          : ""
      }
      ${props.color === "transparent" ? `${style["cta--transparent"]}` : ""}
      ${
        props.color === "carousel-semi-transparent"
          ? `${style["cta--carousel-semi-transparent"]}`
          : ""
      }
      ${props.color === "white-opacity" ? `${style["cta--white-opacity"]}` : ""}
      ${props.color === "dark" ? `${style["cta--dark"]}` : ""}
      ${props.color === "exhibition" ? `${style["cta--exhibition"]}` : ""}
      ${props.color === "viking" ? `${style["cta--viking"]}` : ""}
      ${
        props.color === "viking-inactive"
          ? `${style["cta--viking-inactive"]}`
          : ""
      }
      ${className}
    `}
      style={{ backgroundColor: props.hex ? props.hex : "" }}
      {...props}
    >
      {variant === "cta" ? (
        <Paragraph
          size="small"
          color={
            props.color &&
            [
              "dark",
              "exhibition",
              "viking",
              "carousel-semi-transparent",
            ].includes(props.color)
              ? colors.colorWhite
              : colors.colorDark
          }
        >
          {children}
        </Paragraph>
      ) : (
        children
      )}
    </Button>
  );
};

export default AbstractButton;
